<template>
	<div class="recommend">
		<Card>
			<span>爆款推荐</span>
		</Card>

		<ul>
			<li v-for="(item,index) in recommendList.data" :key='index'>
				<div class="img">
					<img :src="item.imgUrl" alt="">
				</div>
				<div class="content">
					<h3>{{item.name}}</h3>
					<p>{{item.content}}</p>
					<div class="price">
						<span>￥</span>
						<span>{{item.price}}</span>
					</div>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	import Card from '@/components/Home/Card.vue'
	export default{
		name:'Recommend',
		data(){
			return {
			}
		},
		components:{
			Card
		},

		props:['recommendList']
	}
</script>

<style scoped>
ul{
	display: flex;
	flex-direction: column;
}
.img{
	width: 50%;
	height: 144px;
}
img{
	width: 100%;
	height: 100%;
}
ul li {
	margin-top: 10px;
	position: relative;
	padding:0 15px;
}
.content{
	position: absolute;
	top: 20px;
	right: 10px;
}
h3{
	font-size: 14px;
}
p{
	font-size: 14px;
}
.price{
	position: absolute;
	top: 70px;
	right: 10px;
	font-size: 18px;
	color: darkred;
}
</style>